#joyRideTipContent
    display none

.joyRideTipContent
    display none

.joyride-tip-guide
    position absolute
    background rgba(255, 255, 255, 0.95)
    display none
    color rgba(10, 10, 10, 1)
    width 400px
    z-index 101
    top 0
    left 0
    font-weight normal
    border-radius 4px
    box-shadow 0 0 18px 4px rgba(0, 0, 0, 1)

    span
        &.joyride-nub
            &.top
                border-color rgba(255, 255, 255, 0.95)
                border-top-color transparent !important
                border-left-color transparent !important
                border-right-color transparent !important
                top -28px
                bottom none
            &.bottom
                border-color rgba(255, 255, 255, 0.95) !important
                border-bottom-color transparent !important
                border-left-color transparent !important
                border-right-color transparent !important
                bottom -28px
                bottom none
            &.right
                border-color rgba(255, 255, 255, 0.95) !important
                border-top-color transparent !important
                border-right-color transparent !important
                border-bottom-color transparent !important
                top 22px
                bottom none
                left auto
                right -28px
            &.left
                border-color rgba(255, 255, 255, 0.95) !important
                border-top-color transparent !important
                border-left-color transparent !important
                border-bottom-color transparent !important
                top 22px
                left -28px
                right auto
                bottom none
            &.top-right
                border-color rgba(255, 255, 255, 0.95)
                border-top-color transparent !important
                border-left-color transparent !important
                border-right-color transparent !important
                top -28px
                bottom none
                left auto
                right 28px
    h1
        font-size 30px
    h2
        font-size 26px
    h3
        font-size 18px
    h4
        font-size 16px
    h5
        font-size 14px
    h6
        font-size 12px

    p
        margin 0 0 18px 0
        line-height 18px

    a
        border-bottom dotted 1px darkHoverColor

    .joyride-next-tip
        background rgba(40, 130, 60, 0.8)
        border solid 1px rgb(40, 130, 60)
        border-radius 3px
        color rgb(250, 250, 250)
        margin-left -1px
        outline none
        padding 6px 15px 5px
        text-decoration none
        width auto

        &:hover
            background rgb(40, 130, 60)

.joyride-content-wrapper
    padding 10px 10px 15px 15px

    p
        margin-right 5px

    label
        font-weight bold

    .moreinfo
        font-style italic

.joyride-tip-guide
    span
        &.joyride-nub
            display block
            position absolute
            left 22px
            width 0
            height 0
            border solid 14px
            border solid 14px

.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6
    line-height 1.25
    margin-top 0
    font-weight bold
    color rgb(0, 0, 0)

.joyride-timer-indicator-wrap
    width 50px
    height 3px
    border solid 1px rgba(255, 255, 255, 0.1)
    position absolute
    right 17px
    bottom 16px

.joyride-timer-indicator
    display block
    width 0
    height inherit
    background rgba(255, 255, 255, 0.25)

.joyride-close-tip
    position absolute
    right 12px
    top 12px
    color rgba(0, 0, 0, 0.6) !important
    text-decoration none
    font-family Verdana, sans-serif
    font-size 12px
    font-weight bold
    border-bottom none !important
    margin-left 4px
    &:hover
        color rgba(0, 0, 0, 1) !important

.joyride-modal-bg
    background rgba(0, 0, 0, 0.5)
    cursor pointer
    display none
    height 100%
    left 0
    position fixed
    top 0
    z-index 100
    width 100%

.joyride-expose-wrapper
    background-color rgba(255, 255, 255, 1)
    position absolute
    z-index 102
    box-shadow 0px 0px 30px rgba(255, 255, 255, 1)

.joyride-expose-cover
    background Transparent
    position absolute
    z-index 10000
    top 0px
    left 0px

// The tutorial list should not be visible.
#tutorial
    display none

// Full size div to cancel clicks and keys while the tutorial is running.
#tutorial-cancelbg
    cursor not-allowed
    display none
    height 100%
    left 0
    position fixed
    top 0
    z-index 99
    width 100%

// The first step (start).
.tutorial-modal
    width 600px

// Extra margin for menu items.
.tutorial-menu
    margin-top 28px

// Add negative top margin on tooltips on top of map controls.
.tutorial-mapcontrols
    margin-top -20px

// Add negative top margin and right margin to shape template tab.
.tutorial-entityprops
    margin-left 20px